<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../lib/layui/css/layui.css">
    <link rel="stylesheet" href="../css/common/index.css">
    <link rel="stylesheet" href="../css/addMission.css">
</head>

<body class="iframe">
    <div class="row-box add-mission">
            <form class="layui-form" action="" >
        <div class="layui-row layui-col-space20">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header table-title">
                        <span>
                            新建任务
                        </span>
                        <div class="btns">
                            <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="save">
                                <i class="layui-icon layui-icon-search"></i>
                                保存
                            </button>
                            <button class="layui-btn layui-btn-warm">
                                <i class="layui-icon layui-icon-delete"></i>
                                取消
                            </button>
                        </div>
                    </div>
                    <div class="layui-card-body">
                        <div class="layui-row url">
                            <a href="#">添加人员地址：http://www.baidu.com</a>
                        </div>

                    </div>
                    <div class="layui-card-body form-body">
                     
                            <div class="layui-row">
                                <div class="layui-col-md12">
                                    <div class="layui-form-item layui-row">
                                        <div class="layui-inline  layui-col-md3">
                                            <label class="layui-form-label">虚拟账号</label>
                                            <div class="layui-input-inline readonly">
                                                <input type="tel" value="234324324" name="uid"  autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                        <div class="layui-inline   layui-col-md3">
                                            <label class="layui-form-label">账号密码</label>
                                            <div class="layui-input-inline">
                                                <input type="text" value="32424324" name="pwd" lay-verify="required|pass" autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                        <div class="layui-inline   layui-col-md6">
                                            <label class="layui-form-label">核查事由</label>
                                            <div class="layui-input-inline">
                                                <select name="reason" placeholder="请输入">
                                                    <option value="">请选择核查事由</option>
                                                    <option value="1">1</option>
                                                    <option value="2">2</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">任务名称</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="mission" placeholder="请输入任务名称，请简明扼要"  autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">详细事由</label>
                                        <div class="layui-input-inline">
                                            <textarea placeholder="请输入内容" class="layui-textarea" name="detail"></textarea>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <input type="text" name="selectPerson" value="" class="layui-hide"/>
                                        <label class="transfer-label">选择人员</label>
                                        <div class="transfer-box">
                                            <div class="table-left" style="width: 495px;">
                                                <div class="table-bar left">
                                                    <span class="title">可添加人员</span>
                                                    <div class="right-tool search">
                                                        <span class="" onclick="_ft.searchPerson()" style="cursor: pointer;">
                                                            <i class="layui-icon layui-icon-search"></i>
                                                        </span>
                                                        <input type="text" id="searchKey" value="" placeholder="通过姓名，身份证号搜索">
                                                    </div>
                                                </div>
                                                <table class="layui-hide" id="tableLeft" lay-filter="tableLeft"></table>
                                            </div>
                                            <div class="transfer-btns">
                                                <div class="layui-btn layui-btn-normal" onclick="_ft.moveRight()">
                                                    <i class="layui-icon">&#xe65b;</i>
                                                </div>
                                                <div type="button" class="layui-btn layui-btn-normal" onclick="_ft.moveLeft()">
                                                    <i class="layui-icon">&#xe65a;</i>
                                                </div>
                                            </div>
                                            <div class="table-right" style="width: 495px;">
                                                <div class="table-bar right">
                                                    <span class="title">已添加人员</span>
                                                    <div class="right-tool">
                                                        <span class="layui-btn layui-btn-normal btn-text" onclick="_ft.uploadBath()">
                                                            <i class="layui-icon layui-icon-search"></i>
                                                            批量上传
                                                        </span>
                                                        <span class="layui-btn layui-btn-warm btn-text" onclick="_ft.clear()">
                                                            <i class="layui-icon layui-icon-delete"></i>
                                                            清空
                                                        </span>
                                                    </div>
                                                </div>
                                                <table class="layui-hide" id="tableRight"></table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                  
                    </div>
                </div>
            </div>
        </div>
    </form>
    </div>
    <!-- 保存弹窗 -->
    <div class="x-edit-box" id="saveBox">
        <form class="layui-form" action="">
            <div class="layui-row url">
                <a href="#">添加人员网址 http://www.baidu.com</a>
            </div>
            <div class="layui-row">
                <div class="layui-col-xs6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            虚拟账号</label>
                        <div class="layui-input-inline readonly">
                            <input type="text" name="title" placeholder="请输入标题" autocomplete="off" class="layui-input" value="157563254">
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            账号密码</label>
                        <div class="layui-input-inline readonly">
                            <input type="text" name="title" placeholder="请输入标题" readonly autocomplete="off" class="layui-input" value="123456">
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-row">
                <div class="layui-col-xs12">
                    <div class="steps">
                        <div class="step">
                            <div>创建任务</div>
                        </div>
                        <div class="arrow"></div>
                        <div class="step">
                            <div>添加人员</div>
                        </div>
                        <div class="arrow"></div>
                        <div class="step">
                            <div>提交任务</div>
                        </div>
                        <div class="arrow">
                        </div>
                        <div class="step active">
                            <div>公安查询</div>
                        </div>
                        <div class="arrow"></div>
                        <div class="step">
                            <div>结果反馈</div>
                        </div>
                    </div>
                    <div class="tips">任务已提交，随后请耐心等待核查结果...</div>
                </div>
            </div>
            <!-- 直接跟表单的按钮
        <div class="layui-form-item x-edit-bottom">
            <div class="layui-input-inline">
                <button class="layui-btn" lay-submit lay-filter="formDemo">保存</button>
                <button type="reset" class="layui-btn layui-btn-primary" onclick="_fn.onCloseModel()">关闭</button>
            </div>
        </div>-->
        </form>
    </div>
    <script src="../../lib/jquery-1.9.1.min.js"></script>
    <script src="../../lib/layui/layui.all.js"></script>
    <script>
        (function () {
            var table = layui.table;
            var tableLeftObj, tableRightObj;
            var layer = layui.layer;
            var form = layui.form;
            var $ = layui.$;
            console.log(layer.close)
            form.verify({
                pass:  [/(.+){6,12}$/, '密码必须6到12位']
            })
            form.on('submit(save)', function(data) {
               console.log(data.elem)
               console.log(data.form)
               console.log(data.field)
               // 提交
               setTimeout(function() {
                 _ft.saveDialog();
               }, 500)
               return false;
            })
            var leftTableData = [
                { username: '张三1', idCard: '4401545645645645651', createTime: '2018-7-12 12:00:00' }
                , { username: '张三2', idCard: '4401545645645645652', createTime: '2018-7-12 12:00:00' }
                , { username: '张三3', idCard: '4401545645645645653', createTime: '2018-7-12 12:00:00' }
                , { username: '张三4', idCard: '4401545645645645654', createTime: '2018-7-12 12:00:00' }
                , { username: '张三5', idCard: '4401545645645645655', createTime: '2018-7-12 12:00:00' }
                , { username: '张三6', idCard: '4401545645645645656', createTime: '2018-7-12 12:00:00' }
                , { username: '张三7', idCard: '4401545645645645657', createTime: '2018-7-12 12:00:00' }
                , { username: '张三8', idCard: '4401545645645645658', createTime: '2018-7-12 12:00:00' }
                , { username: '张三9', idCard: '4401545645645645659', createTime: '2018-7-12 12:00:00' }
                , { username: '张三10', idCard: '4401545645645645610', createTime: '2018-7-12 12:00:00' }
                , { username: '张三11', idCard: '4401545645645645611', createTime: '2018-7-12 12:00:00' }
                , { username: '张三12', idCard: '4401545645645645612', createTime: '2018-7-12 12:00:00' }
                , { username: '张三13', idCard: '4401545645645645613', createTime: '2018-7-12 12:00:00' }
            ]
            var rightTableData = [
            ]
            var _ft = {
                init: function () {
                    this.renderTableLeft();
                    this.renderTableRight();
                },
                uploadBath: function () {
                    // 上传数据
                    // $.post()
                },
                clear: function () {
                    leftTableData = leftTableData.concat(rightTableData);
                    rightTableData = [];
                    tableRightObj.reload({
                        data: rightTableData
                    })
                    tableLeftObj.reload({
                        data: leftTableData
                    })
                },
                searchPerson: function () {
                    var key = $('#searchKey').val();
                    // 搜索获取人员列表
                    // $.post({key: key}, function() {
                    //  // Todo    
                    // })
                    var index = layer.load();
                    setTimeout(function () {
                        var arr = [];
                        for (var j = 0; j < 30; j++) {
                            arr.push({ username: '搜索数据', idCard: '44015456456456456' + j, createTime: '2018-7-12 12:00:00' })
                        }
                        leftTableData = arr;
                        _ft.renderTableLeft();
                        layer.close(index)
                    }, 1000);
                },
                clone: function (obj) {
                    return JSON.parse(JSON.stringify(obj))
                },
                setPersonSelect:function() {
                    let select = rightTableData.map(function(item) {
                        return item.idCard;
                    })
                    $('input[name="selectPerson"]').val(select.join(','));
                    console.log($('input[name="selectPerson"]').val())
                },
                removeArray: function (arr, removeArr) {
                    var res = [];
                    for (var i = 0; i < arr.length; i++) {
                        console.log(removeArr.indexOf(arr[i].idCard))
                        if (removeArr.indexOf(arr[i].idCard) == -1) {
                            res.push(arr[i]);
                        }
                    }
                    return res;
                },
                moveRight: function () {
                    var checkStatus = table.checkStatus('tableLeft');
                    if (checkStatus.data.length > 0) {
                        var removeArr = checkStatus.data.map(function (item, index) {
                            return item.idCard;
                        });
                        rightTableData = checkStatus.data.concat(rightTableData)
                        leftTableData = _ft.removeArray(leftTableData, removeArr);
                        tableRightObj.reload({
                            data: rightTableData
                        })
                        tableLeftObj.reload({
                            data: leftTableData
                        });
                        this.setPersonSelect();
                    } else {
                        layer.msg('没有选中数据');
                    }
                },
                moveLeft: function () {
                    var checkStatus = table.checkStatus('tableRight');
                    if (checkStatus.data.length > 0) {
                        var removeArr = checkStatus.data.map(function (item, index) {
                            return item.idCard;
                        });
                        leftTableData = checkStatus.data.concat(leftTableData);
                        rightTableData = _ft.removeArray(rightTableData, removeArr);
                        tableRightObj.reload({
                            data: rightTableData
                        })
                        tableLeftObj.reload({
                            data: leftTableData
                        })
                    } else {
                        layer.msg('没有选中数据');
                    }
                },
                renderTableLeft: function () {
                    tableLeftObj = table.render({
                        elem: '#tableLeft'
                        , data: leftTableData
                        , height: 380
                        , cols: [[
                            { type: 'checkbox' }
                            , { field: 'username', width: 80, title: '姓名', sort: true }
                            , { field: 'idCard', minWidth: 80, title: '身份证号码',sort: true  }
                            , { field: 'createTime', minWidth: 80, title: '录入时间',sort: true  }
                        ]],
                        limit: 9999
                    });
                }
                , renderTableRight: function () {
                    tableRightObj = table.render({
                        elem: '#tableRight'
                        , data: rightTableData
                        , height: 380
                        , cols: [[
                            { type: 'checkbox' }
                            , { field: 'username', width: 80, title: '姓名' }
                            , { field: 'idCard', minWidth: 80, title: '身份证号码' }
                            , { field: 'createTime', minWidth: 80, title: '录入时间' }
                        ]],
                        limit: 9999
                    });
                }
                , saveDialog: function () {
                    layer.open({
                        title: '保存成功',
                        type: 1,
                        btnAlign: 'c',
                        area: ['780px', '500px'],
                        shadeClose: true, //点击遮罩关闭
                        btn: ['确定', '关闭'],
                        content: layui.$('#saveBox'),
                        yes: function () {
                            // 保存
                            _ft.onConfirm()
                        },
                        btn2: function () {
                            // 关闭
                            layer.closeAll();
                            // _ft.onCloseModel()
                        }
                    })
                    console.log(layer.index)
                },
                onConfirm: function () {
                    layer.msg('确定保存')
                    setTimeout(function () {
                        _ft.onCloseModel()
                    }, 2000)
                },
                onCloseModel: function () {
                    console.log('fsdfsfadsf')
                    layer.close(layer.index)
                },
            };
            setTimeout(function() {
                _ft.init();
            }, 100);
            // _ft.init();
            window._ft = _ft;
        })()
    </script>
</body>

</html>